import React, { useReducer, useEffect } from "react";
import "./home.css"
import { Icon, } from 'antd-mobile';
import { initState, reducer, actions } from "./home";
import { reqGetnew, reqGetgroupon,reqGetcountdown,reqGetseckill,reqGetindexgoods,reqGetcoupon,reqCartadd } from "../../request/api"
import Newpeople from "./components/newpeople/Newpeople"
import Groupon from "./components/groupon/Groupon"
import Seckill from "./components/seckill/Seckill"
import Indexgoods from "./components/indexgoods/Indexgoods"
import Cheap from "./components/cheap/Cheap"
const Home = (props) => {
    const [state, dispatch] = useReducer(reducer, initState);
    let { news,groupon,seckill,flag,indexgoods,cheap } = state
    //进来页面
    useEffect(() => {
        // 新人专享
        reqGetnew().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeNews(res.data.list))
            }
        })
        // 万人团
        reqGetgroupon().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeGroupon(res.data.list))
            }
        })
        // 倒计时
        reqGetcountdown().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeCountdown(res.data.list))
            }
        })
        // 秒杀
        reqGetseckill().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeSeckill(res.data.list))
            }
        })
        // 商品信息
        reqGetindexgoods().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeIndexgoods(res.data.list))
            }
        })
        // 优惠券
        reqGetcoupon().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeCheap(res.data.list))
            }
        })
        
    }, []);
    let cartAdd = (id) => {
        // 加购
        reqCartadd({ uid: JSON.parse(sessionStorage.getItem("user")).uid, type: 1, goodsid: id, num: 1 })
    }
    return (
        <div className="pad home">
            <div className="search clearfix">
                <Icon type="search" className="fl" />
                <input type="text" placeholder="按内容搜索" className="fl" />
            </div>
            {/* 新人专享 */}
            <Newpeople news={news} cartAdd={cartAdd}></Newpeople>
            {/* 万人团 */}
            <Groupon groupon={groupon} cartAdd={cartAdd}></Groupon>
            {/* 秒杀 */}
            <Seckill seckill={seckill}  cartAdd={cartAdd}></Seckill>
            <ul className="nav">
                    <li onClick={()=>dispatch(actions.changeFlag(0))} className={flag===0?"active":null}>1</li>
                    <li onClick={()=>dispatch(actions.changeFlag(1))} className={flag===1?"active":null}>2</li>
                    <li onClick={()=>dispatch(actions.changeFlag(2))} className={flag===2?"active":null}>3</li>
                    <li onClick={()=>dispatch(actions.changeFlag(3))} className={flag===3?"active":null}>4</li>
                </ul>
            {/* 商品信息 */}
            <Indexgoods indexgoods={indexgoods} flag={flag}  cartAdd={cartAdd}></Indexgoods>
            {/* 商品信息 */}
            <Cheap cheap={cheap}></Cheap>
        </div>
    );
};

export default Home;
